<%@ page isELIgnored="false" contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,initial-scale=1.0">
		<title>369云工厂--活动</title>
		<link rel="stylesheet" href="css/dist/bootstrap.css" />
		<link rel="stylesheet" href="css/dist/bootstrap-theme.min.css" />
		<!--自定义css-->
		<link rel="stylesheet" href="css/style.css" />
	</head>
	<body>
		<div class="wraper">
		    <div class="header-blue header-common">
		        <div class="header-con">
		            <div class="header-logo">
		                <a href="index.action"><img src="img/logo-2.png" alt="" /></a>
		            </div>
		            <div class="nav">
		                <ul>
		                    <li class="nav-item "><a href="index.action">首页</a></li>
		                    <li class="nav-item "><a href="factory.action">云工厂</a></li>
		                    <li class="nav-item"><a href="service.action">服务</a></li>
		                    <li class="nav-item cur"><a href="activity.action">活动</a></li> 
		                    <li class="nav-item"><a href="news.action">新闻</a></li>
		                </ul>
		                <!--移动的滑动-->
		                <div class="move-bg"></div>
		                <!--移动的滑动 end-->
		            </div>
		             <div class="header-right">
		                <a href="#" class="visit visit1" id="visit ">预约参观</a>
		                <a href="#" class="user-center"><img src="img/center.png" alt="云工厂用户中心"></a>
		            </div>
		        </div>
		    </div>
		</div>
		<div class="container active-home">
			<ul class="nav nav-pills active-tabs" >
				<li><a href="#all">全部</a></li>
				<c:forEach items="${cityList}" var="city" varStatus="var">
				<c:if test="${var.index == 0}">
				<li class="active"><a href="#">${city.cityName}</a></li>
				</c:if>
				<c:if test="${var.index != 0}">
				<li><a href="#">${city.cityName}</a></li>
				</c:if>
				</c:forEach>
			</ul>
			<div class="tab-content">
				<div class="tab-pane fade" id="all">
					<ul class="nav nav-pills active-tabs"  >
						<li class="active"><a href="#state-all">全部</a></li>
						<li><a href="#state-notstart">未开始</a></li>
						<li><a href="#state-begin">进行中</a></li>
						<li><a href="#state-end">已结束</a></li>
					</ul>
					<div class="tab-content tab-content-container">
						<div class="tab-pane active fade in" id="state-all">all</div>
						<div class="tab-pane fade" id="state-notstart" >notstart</div>
						<div class="tab-pane fade" id="state-begin" >begin</div>
						<div class="tab-pane fade" id="state-end" >end</div>
					</div>
				</div>
				<div class="tab-pane active fade in" id="beijing">
					<ul class="nav nav-pills active-tabs">
						<li><a href="#beijing-state-all">全部</a></li>
						<li><a href="#beijing-state-notstart">未开始</a></li>
						<li class="active"><a href="#beijing-state-begin">进行中</a></li>
						<li><a href="#beijing-state-end">已结束</a></li>
					</ul>
					<div class="tabs-line"></div>
					<div class="tab-content">
						<div class="tab-pane fade" id="beijing-state-all">北京</div>
						<div class="tab-pane fade" id="beijing-state-notstart" >123</div>
						<div class="tab-pane active fade in tab-content-container" id="beijing-state-begin" >
							<c:forEach items="${activityList}" var="activity" varStatus="var">
							<c:if test="${var.index % 2 == 0}">
							<div class="row act-home clearfix">
							</c:if>
							<c:if test="${var.index % 2 == 0}">
								<div class="col-lg-6 act-home-con clearfix pull-left">
							</c:if>
							<c:if test="${var.index % 2 == 1}">
								<div class="col-lg-6 act-home-con clearfix pull-right">
							</c:if>
									<div class="act-home-pic pull-left"><a href="activity-content.action?id=${activity.acId}"><img src="images/${activity.acIcon}" alt="" /></a></div>
									<div class="act-home-right pull-left">
										<div class="act-home-right-title"><a href="activity-content.action?id=${activity.acId}">${activity.acName}</a></div>
										<div class="act-s-home">
											<div class="act-s-time"><fmt:formatDate value="${activity.acStartDate}" pattern="yyyy-MM-dd" />至<fmt:formatDate value="${activity.acEndDate}" pattern="yyyy-MM-dd" /></div>
											<div class="act-s-address">${activity.acAddr}</div>
										</div>
										<div class="act-btn"><a href="activity-content.action?id=${activity.acId}" class="btn">未开始</a></div>
									</div>
								</div>
							<c:if test="${var.index % 2 == 1}">
							</div>
							</c:if>
							</c:forEach>
						</div>
						<div class="tab-pane fade" id="beijing-state-end" >end</div>
					</div>
				</div>
				<div class="tab-pane fade" id="dalian" >
					<ul class="nav nav-pills active-tabs">
						<li class="active"><a href="#dalian-state-all">全部</a></li>
						<li><a href="#dalian-state-notstart">未开始</a></li>
						<li><a href="#dalian-state-begin">进行中</a></li>
						<li><a href="#dalian-state-end">已结束</a></li>
					</ul>
					<div class="tabs-line"></div>
					<div class="tab-content">
						<div class="tab-pane active fade in" id="dalian-state-all">dalian</div>
						<div class="tab-pane fade" id="dalian-state-notstart" >notstart</div>
						<div class="tab-pane fade" id="dalian-state-begin" >begin</div>
						<div class="tab-pane fade" id="dalian-state-end" >end</div>
					</div>
				</div>
				<div class="tab-pane fade" id="xian" >
					<ul class="nav nav-pills active-tabs">
						<li class="active"><a href="#xian-state-all">全部</a></li>
						<li><a href="#xian-state-notstart">未开始</a></li>
						<li><a href="#xian-state-begin">进行中</a></li>
						<li><a href="#xian-state-end">已结束</a></li>
					</ul>
					<div class="tabs-line"></div>
					<div class="tab-content">
						<div class="tab-pane active fade in" id="xian-state-all">xian</div>
						<div class="tab-pane fade" id="xian-state-notstart" >notstart</div>
						<div class="tab-pane fade" id="xian-state-begin" >begin</div>
						<div class="tab-pane fade" id="xian-state-end" >end</div>
					</div>
				</div>
				<div class="tab-pane fade" id="nanjing" >
					<ul class="nav nav-pills active-tabs">
						<li class="active"><a href="#nanjing-state-all">全部</a></li>
						<li><a href="#nanjing-state-notstart">未开始</a></li>
						<li><a href="#nanjing-state-begin">进行中</a></li>
						<li><a href="#nanjing-state-end">已结束</a></li>
					</ul>
					<div class="tabs-line"></div>
					<div class="tab-content">
						<div class="tab-pane active fade in" id="nanjing-state-all">nanjing</div>
						<div class="tab-pane fade" id="nanjing-state-notstart" >notstart</div>
						<div class="tab-pane fade" id="nanjing-state-begin" >begin</div>
						<div class="tab-pane fade" id="nanjing-state-end" >end</div>
					</div>
					
				</div>
				<div class="tab-pane fade" id="nanchang" >
					<ul class="nav nav-pills active-tabs">
						<li class="active"><a href="#nanchang-state-all">全部</a></li>
						<li><a href="#nanchang-state-notstart">未开始</a></li>
						<li><a href="#nanchang-state-begin">进行中</a></li>
						<li><a href="#nanchang-state-end">已结束</a></li>
					</ul>
					<div class="tabs-line"></div>
					<div class="tab-content">
						<div class="tab-pane active fade in" id="nanchang-state-all">nanchang</div>
						<div class="tab-pane fade" id="nanchang-state-notstart" >notstart</div>
						<div class="tab-pane fade" id="nanchang-state-begin" >begin</div>
						<div class="tab-pane fade" id="nanchang-state-end" >end</div>
					</div>
				</div>
			</div>
		</div>	
		<div class="footerwarp">
			<div class="container-fluid footer">
				<div class="footer-content">
					<div class="footer-logo">
						<a href="index.action"><img src="img/logo-3.png"></a>
					</div>
					<div class="footer-address">
						<ul>
							<li>北京市海淀区北太平庄路18号城建大厦C座3层</li>
							<li>400-8369-369</li>
							<li>fangchong@datangnet.com.cn</li>
						</ul>	
					</div>
					<div class="footer-erweima">
						<img src="img/erweima.png" alt="云工厂" />
					</div>
				</div>
			</div>
			<div class="container-fluid footer-bottom text-center">
				© 2016 Copyrights by datangnet - All rights reserved.
			</div>
		</div>
		<script type="text/javascript" src="js/dist/jquery.min.js" ></script>
		<script type="text/javascript" src="js/dist/bootstrap.js" ></script>
		<script type="text/javascript" src="js/dist/jquery.movebg.js" ></script>
		<script type="text/javascript">
			$(function(){
				$(".nav").movebg({
					width:55/*滑块的大小*/,
					extra:40/*额外反弹的距离*/,
					speed:300/*滑块移动的速度*/,
					rebound_speed:400/*滑块反弹的速度*/
				});
			})
		</script>
		<!--tab选项卡-->
		<script>
			$(function(){
				$(".nav-pills a").click(function(){
					$(this).tab("show")
				})
			})
		</script>
	</body>
</html>
